<div class="person-info">
  <div class="person-info-head">
    <div class="head-left">
      <a [routerLink]="['/outer/project-type']" class="breadcrumb">
        项目
      </a>
      <i nz-icon type="right" theme="outline"></i>
      <a (click)="routeToSurvey()" class="breadcrumb">
        {{projectInfo.name}}
      </a>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        实名制信息
      </b>
    </div>

    <span class="common-search-box" style="float: right;width: 338px;">
      <nz-input-group nzSearch [nzSuffix]="suffixButton">
        <input maxlength="50" type="text" nz-input placeholder="请输入关键字" 
          [(ngModel)]="searchfilter" />
      </nz-input-group>
      <ng-template #suffixButton>
        <button nz-button nzType="primary" nzSearch (click)="searchEvent()">搜索</button>
      </ng-template>
    </span>
  </div>
  <div class="person-info-body">
    <nz-tabset>
      <nz-tab nzTitle="管理人员">



        <div class="body">
          <nz-table #basicTable [nzData]="managerList" [nzShowPagination]="false" [nzScroll]="tableHeight">
            <thead>
              <tr>
                <th nzWidth="10%">头像</th>
                <th nzWidth="10%">姓名</th>
                <th nzWidth="10%">性别</th>
                <th nzWidth="10%">岗位</th>

                <th nzWidth="10%">操作</th>

              </tr>
            </thead>
            <tbody class="zzj-scrollbar">
              <tr *ngFor="let data of managerList">

                <td><img class="person-info-body-table-img"
                    [src]=" data.avatar ?'data:image/jpeg;base64,'+ data.avatar :'../../../../../assets/images/project/header.png'"
                    alt=""> </td>

                <td>{{ data.name }}</td>
                <td>{{ data.gender }}</td>
                <td>{{ data.position || '-'}}</td>

                <td>
                  <!-- 编辑管理人员 -->
                  <i nz-icon type="form" theme="outline" title="编辑" class="delete" (click)="editManagerList(data)"></i>
                </td>
              </tr>
            </tbody>
          </nz-table>
        </div>


        <div class="pager">
          <nz-pagination [(nzPageIndex)]="managerPageInfo.nzPageIndex" [(nzPageSize)]="managerPageInfo.maxResultCount"
            [(nzTotal)]="managerPageInfo.nzTotal" (nzPageIndexChange)="managerPageChange($event)" nzShowQuickJumper
            [nzShowTotal]="totalTemplate">
          </nz-pagination>
          <ng-template #totalTemplate let-total>
            共{{managerPageInfo.nzTotal}}条
          </ng-template>
        </div>
      </nz-tab>



      <nz-tab nzTitle="人员花名册">
        <div class="body">
          <nz-table #basicTable [nzData]="rosterList" [nzShowPagination]="false" [nzScroll]="tableHeight">
            <thead>
              <tr>
                <th nzWidth="10%">头像</th>
                <th nzWidth="10%">姓名</th>
                <th nzWidth="10%">性别</th>
                <th nzWidth="10%">标段</th>
                <th nzWidth="10%">施工单位</th>
                <th nzWidth="10%">班组</th>
                <th nzWidth="10%">人员类别</th>
                <th nzWidth="10%">工种</th>
                <th nzWidth="10%">操作</th>

              </tr>
            </thead>
            <tbody class="zzj-scrollbar">
              <tr *ngFor="let data of rosterList">

                <td><img class="person-info-body-table-img"
                    [src]=" data.avatar ?'data:image/jpeg;base64,'+ data.avatar :'../../../../../assets/images/project/header.png'"
                    alt=""> </td>
                <td>{{ data.name }}</td>
                <td>{{ data.gender }}</td>
                <td>{{ data.descr || 'XXX标段一'}}</td>
                <td>{{ data.descr || 'XXX施工单位'}}</td>
                <td>{{ data.teamName || '-'}}</td>
                <td>{{ data.type === 1?'管理人员':'作业人员'}}</td>
                <td>{{ data.majorName || '-' }}</td>

                <td>
                  <!-- 编辑人员花名册 -->
                  <i nz-icon type="form" theme="outline" title="编辑" class="delete" (click)="editrosterList(data)"></i>
                </td>

              </tr>
            </tbody>
          </nz-table>
        </div>
        <div class="pager">
          <nz-pagination [(nzPageIndex)]="rosterPageInfo.nzPageIndex" [(nzPageSize)]="rosterPageInfo.maxResultCount"
            [(nzTotal)]="rosterPageInfo.nzTotal" (nzPageIndexChange)="rosterPageChange($event)"
            (nzPageSizeChange)="rosterPageSizeChange($event)" nzShowQuickJumper [nzShowTotal]="totalTemplate">
          </nz-pagination>
          <ng-template #totalTemplate let-total>
            共{{rosterPageInfo.nzTotal}}条
          </ng-template>
        </div>
      </nz-tab>
    </nz-tabset>
  </div>
</div>



<!-- 人员花名册改 -->
<nz-modal [(nzVisible)]="isPeopleVisible" [nzTitle]="peopleTitle" [nzContent]="peopleContent" [nzFooter]="peopleFooter"
  (nzOnCancel)="handlePeopleCancel()" nzWidth=500 nzMaskClosable="false">
  <ng-template #peopleTitle>
    {{rosterModal.name? rosterModal.name :'编辑人员信息'}}
  </ng-template>

  <ng-template #peopleContent>

    <div nz-row class="modal">

      <!-- 姓名 -->
      <div nz-row>
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;margin-right: 30px;">姓名</label>
        <input disabled maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="optionList.currentName"
          style=" width: 62%; margin-right:8px;" placeholder="人员姓名">
        <span style="color:red">*</span>
      </div>
      <!-- 性别 -->
      <div nz-row style="margin-top:16px">
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;margin-right: 30px;">性别</label>
        <input disabled maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="optionList.currentGender"
          style="    width: 62%; margin-right:8px;" placeholder="人员性别">
        <span style="color:red">*</span>
      </div>
      <!-- 人员类型 -->
      <div nz-row style="margin-top:16px">
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;margin-right: 30px;">人员</label>
        <nz-select nz-col nzSpan="12" (ngModelChange)="selChange($event)" [(ngModel)]="optionList.currenPeopleType"
          [compareWith]="compareFn" nzPlaceHolder="请选择人员">
          <nz-option *ngFor="let option of optionList.peopleTypeList" [nzLabel]="option.label" [nzValue]="option">
          </nz-option>
        </nz-select> <span style="color:red;vertical-align: top;margin-left: 8px;">*</span>
      </div>
      <!-- 班组 -->
      <div nz-row style="margin-top:16px">
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;margin-right: 30px;">班组</label>
        <nz-select nz-col nzSpan="12" (ngModelChange)="selChange($event)" [(ngModel)]="optionList.currentTeam"
          [compareWith]="compareFn" nzPlaceHolder="请选择人员">
          <nz-option *ngFor="let option of optionList.teamList" [nzLabel]="option.label" [nzValue]="option">
          </nz-option>
        </nz-select> <span style="color:red;vertical-align: top;margin-left: 8px;">*</span>
      </div>

      <!-- 工种 -->
      <div nz-row style="margin-top:16px">
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;margin-right: 30px;">工种</label>
        <nz-select nz-col nzSpan="12" (ngModelChange)="selChange($event)" [(ngModel)]="optionList.currentMajor"
          [compareWith]="compareFn" nzPlaceHolder="请选择人员">
          <nz-option *ngFor="let option of optionList.majorList" [nzLabel]="option.label" [nzValue]="option">
          </nz-option>
        </nz-select> <span style="color:red;vertical-align: top;margin-left: 8px;">*</span>
      </div>
    </div>
  </ng-template>

  <ng-template #peopleFooter>
    <button nz-button nzType="primary" (click)="handlePeopleOk($event)">保存</button>
  </ng-template>
</nz-modal>


<!-- 管理人员修改 -->
<nz-modal [(nzVisible)]="isManageVisible" [nzTitle]="ManageTitle" [nzContent]="ManageContent" [nzFooter]="ManageFooter"
  (nzOnCancel)="handleManageCancel()" nzWidth=500 nzMaskClosable="false">
  <ng-template #ManageTitle>
    {{managerModal.name? managerModal.name :'编辑人员信息'}}
  </ng-template>

  <ng-template #ManageContent>


    <div nz-row class="modal">


      <div nz-row>
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;margin-right: 30px;">姓名</label>
        <input disabled maxlength="50" nz-col nzSpan="12" nz-input [(ngModel)]="currentManager.name"
          style="    width: 62%; margin-right:8px;" placeholder="人员姓名">
        <span style="color:red">*</span>
      </div>

      <div nz-row style="margin-top:16px">
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;margin-right: 30px;">性别</label>
        <input disabled maxlength="50" nz-col nzSpan="12" nz-input [(ngModel)]="currentManager.gender"
          style="    width: 62%; margin-right:8px;" placeholder="人员性别">
        <span style="color:red">*</span>
      </div>

      <div nz-row style="margin-top:16px">
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;margin-right: 30px;">岗位</label>
        <input maxlength="50" nz-col nzSpan="12" nz-input [(ngModel)]="managerModal.position"
          style="    width: 62%; margin-right:8px;" placeholder="人员岗位">
        <span style="color:red">*</span>
      </div>
    </div>

  </ng-template>

  <ng-template #ManageFooter>
    <button nz-button nzType="primary" (click)="handleManageOk($event)">保存</button>
  </ng-template>
</nz-modal>